<script>
  import { flip } from "svelte/animate"
  import { quintOut } from "svelte/easing"
  import { crossfade, scale, fade, slide, fly } from "svelte/transition"
  import { dest } from "./dest"

  const [send, receive] = crossfade({
    duration: 500,
    fallback: fade,
    easing: quintOut,
  })

  let selected = null
  let layout = "layout-a"
</script>
<div block relative  min-h-200>
{#if layout === "layout-a"}
  <div class="absolute flex-col">
    {#each dest as item (item.id)}
      <div
        class="flex p-1"
        in:receive={{ key: item.id }}
        out:send={{ key: item.id }}
        animate:flip
        on:click={() => {
          selected = item
          layout = "layout-b"
        }}
      >
        <div class="cursor-pointer">
          <img class="h-32 w-32" src={item.imageUrl} alt={item.imageAlt} />
        </div>
        <div>
          <h3 class="text-lg ml-2 font-semibold text-gray-800">{item.city}</h3>
          <p class="text-gray-600 ml-2">${item.averagePrice} / night average</p>
        </div>
      </div>
    {/each}
  </div>
{:else if layout === "layout-b"}
  <div class="absolute flex-col">
    {#each dest as item, index}
      <div class={item === selected ? "op0 flex p-1" : "flex p-1"}>
        <div class="cursor-pointer">
          <img class="h-32 w-32" src={item.imageUrl} alt={item.imageAlt} />
        </div>
        <div>
          <h3 class="text-lg ml-2 font-semibold text-gray-800">{item.city}</h3>
          <p class="text-gray-600 ml-2">${item.averagePrice} / night average</p>
        </div>
      </div>
    {/each}
  </div>
  <div
    class="absolute w-full  flex items-center justify-center p-1"
    on:click={() => {
      layout = "layout-a"
    }}
  >
    <div class="flex-col cursor-pointer">
      <div in:receive={{ key: selected.id }} out:send={{ key: selected.id }}>
        <img
          class="max-w-3xl min-w-2xl"
          src={selected.imageUrl}
          alt="Sunset in the mountains"
        />
      </div>
      <div in:slide={{ delay: 400 }} out:slide={{ delay: -1000 }}>
        <h3 class="font-semibold text-2xl text-gray-800">
          {selected.city}
        </h3>

        <p class="text-gray-600">
          ${selected.averagePrice} / night average
        </p>
      </div>
      <div in:slide={{ delay: 350 }} out:slide={{ delay: -1000 }} class="mt-2">
        <a
          href="https://svelte.dev/"
          class="text-indigo-500 hover:text-indigo-400 font-semibold text-sm"
          >Explore {selected.propertyCount} properties
        </a>
      </div>
      <div
        class="max-w-lg"
        in:fade={{ delay: 600 }}
        out:fade={{ delay: -1000 }}
      >
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. I
      </div>
    </div>
  </div>
{/if}
</div>